import React from 'react';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {Card, Row, Col} from 'antd';
import AreaTemp from "./components/AreaTemp";
import ChangeRate from "./components/ChangeRate";
import QinShiStatus from "./components/QinShiStatus";
import QinShiHistory from "./components/QinShiHistory";
import JunYunStatus from "./components/JunYunStatus";
import ActivePredictLong from "./components/ActivePredictLong";
import ActivePredictShort from "./components/ActivePredictShort";
import QinShiRadarOut from "./components/QinShiRadarOut";
import QinShiRadarIn from "./components/QinShiRadarIn";
import Common from "@/pages/common";
import CommonTable from "@/pages/commonTable";
import MathJax from 'react-mathjax'


export default () => (
  <PageHeaderWrapper>
    <Row>
      <Col span={24} style={{paddingRight: 8}}>
        <Card
          style={{width: '100%'}}
          title={<Row>
            <Col span={12}>炉缸区域温度</Col>
            <Col span={12}>
              <MathJax.Provider>
                <div>
                  <MathJax.Node formula={'均匀性 = \\cfrac {1}{\\sqrt{\\frac 1n*\\sum_{}(T-t)^2}}'}/>
                </div>
              </MathJax.Provider>
            </Col>
          </Row>}
          bordered={false}
          loading={false}
        >
          <AreaTemp/>
        </Card>
      </Col>
      {/*<Col span={8} style={{paddingRight: 8}}>*/}
      {/*  <Card*/}
      {/*    style={{width: '100%'}}*/}
      {/*    title="炉缸侵蚀状态"*/}
      {/*    bordered={false}*/}
      {/*    loading={false}*/}
      {/*  >*/}
      {/*    <QinShiStatus/>*/}
      {/*  </Card>*/}
      {/*</Col>*/}
      {/*<Col span={8} style={{paddingRight: 8}}>*/}
      {/*  <Card*/}
      {/*    style={{width: '100%'}}*/}
      {/*    title="炉缸均匀状态"*/}
      {/*    bordered={false}*/}
      {/*    loading={false}*/}
      {/*  >*/}
      {/*    <JunYunStatus/>*/}
      {/*  </Card>*/}
      {/*</Col>*/}
    </Row>

    <ChangeRate/>


    <Row style={{marginTop: 24}}>
      <Col span={12} style={{paddingRight: 8}}>
        <Card
          style={{width: '100%'}}
          title="炉缸侵蚀状态"
          bordered={false}
          loading={false}
        >
          <QinShiStatus/>
        </Card>
      </Col>
      <Col span={12}>
        <Card
          style={{width: '100%'}}
          title="炉缸历史侵蚀状态"
          bordered={false}
          loading={false}
        >
          <QinShiHistory/>
        </Card>
      </Col>
    </Row>

    <Row style={{marginTop: 24}}>
      <Card
        style={{width: '100%'}}
        title="炉缸均匀状态"
        bordered={false}
        loading={false}
      >
        <JunYunStatus/>
      </Card>
    </Row>
    <Row style={{marginTop: 24}}>
      <Col span={12}>
        <Card
          style={{width: '100%'}}
          title="炉缸长期活跃预测"
          bordered={false}
          loading={false}
        >
          <ActivePredictLong/>
        </Card>
      </Col>

      <Col span={12}>
        <Card
          style={{width: '100%'}}
          title="炉缸短期活跃预测"
          bordered={false}
          loading={false}
        >
          <ActivePredictShort/>
        </Card>
      </Col>
    </Row>
    {/*<Row style={{marginTop: 24}}>*/}
    {/*  <Col span={12}>*/}
    {/*    <Common name="LugangBodyA"/>*/}
    {/*  </Col>*/}
    {/*  <Col span={12}>*/}
    {/*    <Common name="LugangBodyB"/>*/}
    {/*  </Col>*/}
    {/*</Row>*/}
    {/*<Row style={{marginTop: 24}}>*/}
    {/*  <Col span={12}>*/}
    {/*    <Common name="LugangBodyC"/>*/}
    {/*  </Col>*/}
    {/*  <Col span={12}>*/}
    {/*    <CommonTable scroll={{*/}
    {/*      y: 310,*/}
    {/*    }} name="ZhaPiComponent"/>*/}
    {/*  </Col>*/}
    {/*</Row>*/}
    {/*<Row style={{marginTop: 24}}>*/}
    {/*  <Col span={12}>*/}
    {/*    <Card*/}
    {/*      style={{width: '100%'}}*/}
    {/*      title="炉缸区域外环状态监测"*/}
    {/*      bordered={false}*/}
    {/*      loading={false}*/}
    {/*    >*/}
    {/*      <QinShiRadarOut/>*/}
    {/*    </Card>*/}
    {/*  </Col>*/}
    {/*  <Col span={12}>*/}
    {/*    <Card*/}
    {/*      style={{width: '100%'}}*/}
    {/*      title="炉缸区域内环状态监测"*/}
    {/*      bordered={false}*/}
    {/*      loading={false}*/}
    {/*    >*/}
    {/*      <QinShiRadarIn/>*/}
    {/*    </Card>*/}
    {/*  </Col>*/}
    {/*</Row>*/}
  </PageHeaderWrapper>
);
